<template>
  <div>
    <!-- <a class="nav-icon-item" @mouseover="onHover">
      <svg-icon class-name="menus-icon" icon-class="email" />
      <span class="menus-badge">{{ messageNum }}</span>
    </a> -->
    <a class="nav-icon-item">
      <el-popover placement="bottom" width="400" trigger="hover" >
        <el-tabs v-model="activeName">
          <el-tab-pane label="消息通知" name="message">
            <message :eventList="eventList" />
          </el-tab-pane>
          <el-tab-pane label="系统公告" name="notice">
            <notice :noticeList="noticeList" />
          </el-tab-pane>
        </el-tabs>
        <el-divider></el-divider>
        <router-link to="/user/message">
          <el-link :underline="false">查看全部</el-link>
        </router-link>
        <i class="el-icon-message-solid" slot="reference"></i>
      </el-popover>
      <span class="menus-badge">{{ messageNum }}</span>
    </a>
  </div>
</template>

<script>
import message from "./message";
import notice from "./notice";
import { listEvent } from "@/api/ehr/event";
import { listNotice, getNotice, updateNotice } from "@/api/system/notice";
export default {
  name: "OpenEHRBell",
  components: { message, notice },
  data() {
    return {
      // loading: true,
      messageNum: null,
      noticeTotal: null,
      pollingST: null,
      opacity: 1,
      activeName: "message",
      // 消息中心表格数据
      eventList: [],
      // 系统消息数据列表
      noticeList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        orderByColumn: "datetimeStarted", // 排序字段
        isAsc: "DESC", // 升序或降序 大写的 ASC或DESC,为空代表升序
        communicationEventTypeId: null,
        statusId: "posted",
        partyIdFrom: null,
        partyIdTo: null,
        datetimeStarted: null,
        datetimeEnded: null,
        subject: null,
        content: null,
        note: null,
      },
      // 查询参数
      queryNoticeParams: {
        pageNum: 1,
        pageSize: 100,
        noticeTitle: undefined,
        createBy: undefined,
        status: undefined,
      },
    };
  },
  created() {
    this.queryParams.partyIdTo = this.$store.state.user.partyId;
    // 调用轮询
    this.polling();
  },
  destroyed() {
    clearTimeout(this.pollingST);
  },
  mounted() {
    this.change();
  },
  methods: {
    change() {
      setInterval(() => {
        this.opacity -= 0.01;
        if (this.opacity <= 0) this.opacity = 1;
      }, 16);
    },

    // 轮询方法 /** 查询消息中心列表 */
    polling(params) {
      // this.loading = true;
      listNotice(this.queryNoticeParams).then((res) => {
        this.noticeList = res.rows;
        this.noticeTotal = res.total;
      });
      listEvent(this.queryParams).then((response) => {
        this.eventList = response.rows;
        this.messageNum = response.total;
        if (this.noticeTotal > 0) {
          this.messageNum = this.messageNum + this.noticeTotal;
        }
        this.pollingST = setTimeout(() => {
          // this.loading = false;
          console.info("messageNum:" + this.messageNum);
          clearTimeout(this.pollingST);
          this.polling(params);
        }, 10000);
      });
    },
    /** 查询消息中心列表 */
    getList() {
      listEvent(this.queryParams).then((response) => {
        this.eventList = response.rows;
        this.messageNum = response.total;
      });
    },
    /** 查询公告列表 */
    getNoticeList() {
      listNotice(this.queryNoticeParams).then((response) => {
        this.noticeList = response.rows;
        this.noticeTotal = response.total;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
  .el-badge{
    line-height: 25px;
  }
.nav-icon-item {
  /*height: 50px;*/
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 14px;
  position: relative;
  .menus-icon {
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: inherit;
    font-size: 0;
  }
  .menus-badge {
    background-color: #ff4949;
    border-color: #ff4949;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    max-width: 100%;
    height: 20px;
    line-height: 20px;
    padding: 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    top: -5px;
    left: 25px;
    line-height: 20px;
    min-width: 20px;
    text-align: center;
    border-radius: 10px;
    box-sizing: border-box;
  }
}
</style>
